<template>
  <div class="delete_warpper">
    <ManageView
      :data="data"
      :pagination="pagination"
      @handleRecovery="handleRecovery"
      @handleDelete="handleDelete"
      @paginationChange="paginationChange"
    />
  </div>
</template>
<script lang="ts">
import { PaginationParam } from '@/model/common/PaginationParam';
import QuestionaireBasic from '@/model/questionaire/QuestionaireBasic';
import { useManageDeleteStore } from '@/store/manage';
import { PaginationProps } from 'ant-design-vue';
import { computed, defineComponent, watchEffect } from 'vue';
import ManageView from './ManageView.vue';
export default defineComponent({
  components: { ManageView },
  setup() {
    const deleteStore = useManageDeleteStore();

    const data = computed<QuestionaireBasic[]>(() => deleteStore.result);

    deleteStore.queryDelete();

    const handleRecovery = async (value: string) => {
      await deleteStore.queryRecovery(value);
      await deleteStore.queryDelete();
    };

    const handleDelete = async (value: string) => {
      await deleteStore.queryDelet(value);
      await deleteStore.queryDelete();
    };

    const pagination = computed<PaginationParam>(() => {
      return deleteStore.pagination;
    });

    const paginationChange = (value: PaginationProps) => {
      deleteStore.setPage(value.current ?? 1, value.pageSize ?? 10);
      deleteStore.queryDelete();
    };
    return { paginationChange, data, handleRecovery, handleDelete, pagination };
  },
});
</script>
<style lang="less" scoped>
.delete_warpper {
  background-color: white;
  border-radius: 8px;
  padding: 12px;
}
</style>
